﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
      div{
          width:590px;
          height:470px;
          margin:100px auto;
          position:relative;
          overflow:hidden;
      }
        ul {
            left: -100%;
            display: flex;
            position: absolute;
            transition: all .2s linear;
        }
        ol {
            display: flex;
            position: absolute;
            bottom: 10px;
            width: 100%;
            justify-content: center;
         }
      ol>li{
          width:20px;
          height:20px;
          border-radius:10px;
          background:#808080;
          margin:5px;
        }
            ol > li:nth-child(1){
                background:#00ffff
            }
    </style>
</head>
<body>
    <div>
        <ul>
           
        </ul>
        
        <ol>
          
        </ol>
    </div>
    <script>
        let str = ``, str1 = ``, l = 1;
        for (var i = 0; i < 3; i++) {
            str1 +=`  <li></li>`
        }
        for (var i = -1; i < 4; i++) {
            str +=` <li> <a href="#"> <img src="img/q${i}.jpg" alt="Alternate Text" /></a></li>`
        }
        let ul = document.querySelector(`ul`);
        let ol = document.querySelector(`ol`);
       
        ul.innerHTML = str;
        ol.innerHTML = str1;
        
        let lis = document.querySelectorAll(`ul>li`);
        let lis1 = document.querySelectorAll(`ol>li`);
        let imgs = document.querySelectorAll(`img`)
        let as = document.querySelectorAll(`a`)
        
        lis[4].firstElementChild.firstElementChild.src =`http://localhost:64685/img/q0.jpg`
        lis[0].firstElementChild.firstElementChild.src =`http://localhost:64685/img/q2.jpg`
        for (var i = 0; i < lis.length; i++) {
            imgs[i].draggable = false;
            as[i].draggable = false;
            lis[i].onclick = function (e) {
                if (e.offsetX > 295) {
                    l++;
                    ul.style.transition = `all .2s linear ` 
                    if (l == 4) {
                      
                        ul.style.left = `${-100 * l}%`;
                       
                        setTimeout(function () {
                            l = 1;
                            ul.style.transition = `all 0s`
                            ul.style.left = `${-100 * l}%`;
                            for (var j = 0; j < lis1.length; j++) {
                                lis1[j].style.background = `#808080`;
                            }
                            lis1[l-1].style.background = `#00ffff`;
                        }, 200);
                        return;
                    }
                   
                  
                    for (var j = 0; j < lis1.length; j++) {
                        lis1[j].style.background = `#808080`;
                    }
                    lis1[l-1].style.background = `#00ffff`;
                    ul.style.left = `${-100*l}%`;
                } if (e.offsetX < 295) {
                    l--
                    ul.style.transition = `all .2s linear ` 
                    if (l==0) {
                        ul.style.left = `${-100 * l}%`;

                        setTimeout(function () {
                            l = 3;
                            ul.style.transition = `all 0s`
                            ul.style.left = `${-100 * l}%`;
                            for (var j = 0; j < lis1.length; j++) {
                                lis1[j].style.background = `#808080`;
                            }
                            lis1[l - 1].style.background = `#00ffff`;
                        }, 200);
                        return;
                    }
                    console.log(l);
                  
                    for (var j = 0; j < lis1.length; j++) {
                        lis1[j].style.background = `#808080`;
                    }
                    lis1[l-1].style.background = `#00ffff`;
                    ul.style.left = `${-100 * l}%`;
                }
            }
            lis[i].onmousedown = function (e) {
                let x = e.offsetX
            }
            lis[i].onmouseup = function (e) {
                let x1 = e.offsetX
            }
        }
    </script>
</body>
</html>